<template>
  <div class="exhibition-info">
    <ul class="brand-content">
      <li>是否对外贸易：{{ customerDetail.externalTrade }}</li>
      <li>外贸占比：{{ customerDetail.externalTradeRatio }}</li>
      <li>是否定制：{{ getCustomMode(customerDetail.customMade) }}</li>
      <li>面积（㎡）：{{ customerDetail.area }}</li>
      <li>服务范围：{{ customerDetail.serviceScope }}</li>
      <li>是否能产品备案：{{ customerDetail.filings }}</li>
      <li>年产量：{{ customerDetail.annualOutput }}</li>
      <li>年产值：{{ customerDetail.annualValue }}</li>
      <li>研发人员数：{{ customerDetail.researchStaffNum }}</li>
      <li>原材料备案数：{{ customerDetail.filingsNum }}</li>
      <li>起订量：{{ customerDetail.minOrder }}</li>
      <li>专利数：{{ customerDetail.patent }}</li>
      <li>模具数：{{ customerDetail.modelNum }}</li>
      <li>包装开发人数：{{ customerDetail.packDesigners }}</li>
      <li>研发工程师：{{ customerDetail.engineer }}</li>
      <li>材料产品数：{{ customerDetail.materialProductNum }}</li>
    </ul>

    <div class="partner-box">
      <p class="title">合作用户：</p>
      <div class="partner-main">
        <div
          class="partner-item"
          v-for="(item, index) of partnerVoList"
          :key="index"
        >
          <img :src="item.partnerLogo" alt="" />
          <p>合作用户名：{{ item.partnerName }}</p>
          <p>合作伙伴类型：{{ getPartnerType(item.partnerType) }}</p>
        </div>
      </div>
    </div>

    <div class="category-item">
      <span>一级品类：</span>
      {{ oneCategory?.dictLabel }}
    </div>

    <div class="category-item">
      <span>二级品类：</span>
      {{ twoCategory }}
    </div>

    <div class="category-item">
      <span>主推：</span>
      {{ mainPushLabel }}
    </div>
  </div>
</template>

<script setup lang="ts" name="ExhibitionInfo">
import { computed, ref, watch } from "vue";
import { dictListAll } from "@/api/dict";

const props = defineProps({
  detail: {
    type: Object,
    default: () => {}
  }
});
const customerDetail = computed(() => props.detail);
const categoryData = ref<Record<string, any>[]>([]);
const partnerVoList = computed(() => customerDetail.value.partnerVoList || []);
const oneCategory = computed(() => {
  const categoryOne = customerDetail.value.customCategoryVo?.categoryOne;
  return categoryData.value.find((item: any) => item.dictValue === categoryOne);
});
const twoCategory = computed(() => {
  const arr = oneCategory.value?.sysDictDataVoList || [];
  const categoryTwo = customerDetail.value.customCategoryVo?.categoryTwo;
  const list = categoryTwo ? categoryTwo.split(",") : [];
  const labelList: string[] = [];
  arr.forEach((item: any) => {
    if (list.includes(item.dictValue)) labelList.push(item.dictLabel);
  });
  return labelList.join(",");
});
const mainPushLabel = computed(() => {
  const arr = oneCategory.value?.sysDictDataVoList || [];
  const mainPush = customerDetail.value.customCategoryVo?.mainPush;
  const list = mainPush ? mainPush.split(",") : [];
  const labelList: string[] = [];
  arr.forEach((item: any) => {
    if (list.includes(item.dictValue)) labelList.push(item.dictLabel);
  });
  return labelList.join(",");
});
const partnerType = ref<Record<string, any>[]>([]);

function getCustomMode(type: string) {
  if (type === "Y") return "是";
  if (type === "N") return "否";
  return "";
}

function getPartnerType(type: string) {
  const part = partnerType.value.find((item: any) => type === item.dictValue);
  return part?.dictLabel;
}

dictListAll("partner_type").then(res => {
  partnerType.value = res.data || [];
});

watch(
  () => customerDetail.value.companyType,
  (val: string) => {
    if (val === "3") {
      // 工厂品类
      dictListAll("factory_category").then(res => {
        categoryData.value = res.data || [];
      });
    }
    if (val === "4") {
      // 服务商品类
      dictListAll("provider_category").then(res => {
        categoryData.value = res.data || [];
      });
    }
    if (val === "5") {
      // 达人机构品类
      dictListAll("talent_org_category").then(res => {
        categoryData.value = res.data || [];
      });
    }
  },
  { immediate: true }
);
</script>

<style scoped lang="less">
.exhibition-info {
  .brand-content li {
    margin-bottom: 0.6rem;
  }

  .partner-box {
    margin: 2rem 0;

    .title {
      color: #000;
      font-weight: 700;
    }

    .partner-main {
      display: flex;
      flex-wrap: wrap;
    }

    .partner-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-left: 1rem;
      margin-top: 1rem;

      img {
        width: 4rem;
        height: 4rem;
        object-fit: contain;
      }

      > div,
      p {
        margin-top: 0.5rem;
      }

      p {
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }

  .category-item {
    margin-top: 1.4rem;
    line-height: 1.8rem;
    span {
      color: #000;
      font-weight: 700;
    }
  }
}
</style>
